<template>
	<div class="bg">
		<div class="banner">
			<image :src="banner" mode="widthFix"></image>
		</div>
		<div v-if="isshow" style="    text-align: center;
    margin-top: 40px;
    ">
		<p style="font-size: 50rpx;font-weight: bold;">{{banji}}</p>
			<div style="font-size: 50rpx;margin-top:80rpx;">
				您的座位号是：
				<span style="color: #f56c6c;font-weight: bold;">{{limit}}号</span>
				<span  @click="clickImg" style="font-size: 30rpx;color: #4e6ef2;">(查看座位)</span>
			</div>
		</div>
		<div @click="choujiang" v-else style="text-align: center;margin-top: 80px;">
			<img :src="chouqian" style="width: 200px;height: 200px;" alt="">
		</div>
		<!-- <div v-if="zuowei" style="position: fixed;bottom: 0;left: 0;right: 0;" >
			<image :src="zuowei" style="width: 100%;" mode="widthFix" @click="clickImg" ></image>
		</div> -->
		<div class="detailBox" style="z-index: 999;" v-if="showDetail">
			<div class="content">
				<h2>座位视图</h2>
				<div class="close" @click="showDetail = false"><u-icon name="close-circle" size="28"
						color="#000"></u-icon></div>
						<image :src="zuowei2" style="width: 100%;margin-top: 24rpx;" mode="widthFix" @click="clickImg" ></image>
			</div>
		</div>
	</div>
</template>


<script>
	const db = wx.cloud.database()
	export default {
		
		data() {
			return {
				banner: "https://www.baixuemianshi.com/zhuanti/images/chouqianbannner.png",
				zuowei: "https://www.baixuemianshi.com/zhuanti/images/chouqianbannner.png",
				zuowei2: "https://www.baixuemianshi.com/zhuanti/images/chouqianbannner.png",
				limit:'',
				isshow:false,
				chouqian: "https://www.baixuemianshi.com/zhuanti/tiku/images/chouqian.png",
				banji:'',
				showDetail:false
			}
		},
		created() {
			let that = this;

		},
		onLoad(options) {
			this.limit = options.limit
			this.banji  =options.banji
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
		mounted() {
			let that = this

		},
		methods: {
			 
			 clickImg: function(e){
				 this.showDetail = true
			   var imgUrl = this.banner;
			   console.log(imgUrl,'imgUrl')
			   // wx.previewImage({
			   //   urls: this.banner, //需要预览的图片http链接列表，注意是数组
			   //   current: '', // 当前显示图片的http链接，默认是第一个
			   //   success: function (res) { },
			   //   fail: function (res) { },
			   //   complete: function (res) { },
			   // })
			  // wx.previewImage({
			  //          current:this.banner,//当前点击的预览图片链接
			  //          urls: this.banner,//需要预览的图片列表
			  //        })
	},
			
			choujiang(){
				this.isshow = true
			}
		},
	};
</script>

<style>
	@import url(./index.css);
	.detailBtn{position: fixed; bottom: 0; left: 0; width: 700rpx; padding: 25rpx; display: flex; justify-content: space-between; z-index: 10; background-color: #fff;}
	.detailBtn>div{padding: 0 10rpx; flex: 1}
	
	.detailBox{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 9999; overflow: auto;}
	.detailBox .content{position: relative; width: 600rpx; background-color: #fff; padding: 25rpx; margin: 50rpx auto;  background: #fff ;}
	.detailBox .content .close{position: absolute; top: 15rpx; right: 15rpx; color: #000;}
</style>